<template>
	<div class="warp">
		<el-tabs v-model="activeName">
			<el-tab-pane label="自修" name="first">
				<el-row :gutter="24">
					<el-form ref="elForm" :model="formData" :rules="rules" size="medium " label-width="10px">
						<!-- 关键字 -->
						<el-col :span="6">
							<el-form-item label-width="100px" label="关键字" prop="field102">
								<el-input v-model="formData.field102" placeholder="维修设备/项目，自修单号，维修申请单号" clearable :style="{ width: '100%' }"> </el-input>
							</el-form-item>
						</el-col>

						<!-- 归属公司 -->
						<el-col :span="6">
							<el-form-item prop="field101" label-width="100px" label="归属公司">
								<el-select v-model="formData.field101" placeholder="请选择归属公司" clearable :style="{ width: '100%' }">
									<el-option v-for="(item, index) in field101Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- 申请部门 -->
						<el-col :span="6">
							<el-form-item prop="field101" label-width="100px" label="申请部门">
								<el-select v-model="formData.field101" placeholder="请选择申请部门" clearable :style="{ width: '100%' }">
									<el-option v-for="(item, index) in field101Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- 状态 -->
						<el-col :span="6">
							<el-form-item prop="field101" label-width="100px" label="状态">
								<el-select v-model="formData.field101" placeholder="状态" clearable :style="{ width: '100%' }">
									<el-option v-for="(item, index) in field101Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- 申请船舶 -->
						<el-col :span="6">
							<el-form-item prop="field101" label-width="100px" label="船舶名称">
								<el-select v-model="formData.field101" placeholder="请选择船舶名称" clearable :style="{ width: '100%' }">
									<el-option v-for="(item, index) in field101Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- 紧急程度 -->
						<el-col :span="6">
							<el-form-item prop="field101" label-width="100px" label="紧急程度">
								<el-select v-model="formData.field101" placeholder="请选择紧急程度" clearable :style="{ width: '100%' }">
									<el-option v-for="(item, index) in field101Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- 计划自修日期 -->
						<el-col :span="6">
							<el-form-item label-width="100px" label="计划自修日期" prop="field103">
								<el-date-picker
									type="daterange"
									v-model="formData.field103"
									format="yyyy-MM-dd"
									value-format="yyyy-MM-dd"
									:style="{ width: '100%' }"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									range-separator="至"
									clearable
								></el-date-picker>
							</el-form-item>
						</el-col>
						<!-- 完成日期· -->
						<el-col :span="6">
							<el-form-item label-width="100px" label="完成日期" prop="field103">
								<el-date-picker
									type="daterange"
									v-model="formData.field103"
									format="yyyy-MM-dd"
									value-format="yyyy-MM-dd"
									:style="{ width: '100%' }"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									range-separator="至"
									clearable
								></el-date-picker>
							</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<el-button size="medium" type="primary" @click="submitForm" icon="el-icon-search">查询</el-button>
				<el-button size="medium" @click="resetForm" icon="el-icon-delete">重置</el-button>
				<el-button size="medium" icon="el-icon-delete">验收</el-button>
				<el-button size="medium" @click="resetForm" icon="el-icon-delete">导出</el-button><el-button size="medium" @click="resetForm" icon="el-icon-delete">执行</el-button>

				<el-table :data="tableData" style="width: 100%; margin: 20px 0" max-height="500" border>
					<el-table-column fixed type="selection" width="55" align="center"> </el-table-column>
					<el-table-column fixed prop="date" label="维修设备/项目" min-width="150" align="center"> </el-table-column>
					<el-table-column prop="name" label="船舶名称" min-width="120" align="center"> </el-table-column>
					<el-table-column prop="province" label="自修单号" min-width="120" align="center"> </el-table-column>
					<el-table-column prop="city" label="紧急程度" min-width="120" align="center"> </el-table-column>
					<el-table-column prop="city" label="计划自修日期" min-width="120" align="center"> </el-table-column>
					<el-table-column prop="city" label="预计维修地点" min-width="120" align="center"> </el-table-column>
					<el-table-column prop="address" label="完成日期" min-width="120" align="center"> </el-table-column>
					<el-table-column prop="zip" label="维修地点" min-width="120" align="center"> </el-table-column>
					<el-table-column prop="zip" label="状态" min-width="120" align="center"> </el-table-column>
					<el-table-column label="操作" fixed="right" min-width="100" align="center">
						<template slot-scope="scope">
							<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"> 完成 </el-button>
							<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"> 取消 </el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="航修" name="second">
				<el-row :gutter="24">
					<el-form ref="elForm" :model="formData" :rules="rules" size="medium " label-width="10px">
						<!-- 关键字 -->
						<el-col :span="6">
							<el-form-item label-width="100px" label="关键字" prop="field102">
								<el-input v-model="formData.field102" placeholder="维修设备/项目，自修单号，维修申请单号" clearable :style="{ width: '100%' }"> </el-input>
							</el-form-item>
						</el-col>
						<!-- 归属公司 -->
						<el-col :span="6">
							<el-form-item prop="field101" label-width="100px" label="归属公司">
								<el-select v-model="formData.field101" placeholder="请选择归属公司" clearable :style="{ width: '100%' }">
									<el-option v-for="(item, index) in field101Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- 申请部门 -->
						<el-col :span="6">
							<el-form-item prop="field101" label-width="100px" label="申请部门">
								<el-select v-model="formData.field101" placeholder="请选择申请部门" clearable :style="{ width: '100%' }">
									<el-option v-for="(item, index) in field101Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- 状态 -->
						<el-col :span="6">
							<el-form-item prop="field101" label-width="100px" label="状态">
								<el-select v-model="formData.field101" placeholder="状态" clearable :style="{ width: '100%' }">
									<el-option v-for="(item, index) in field101Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- 申请船舶 -->
						<el-col :span="6">
							<el-form-item prop="field101" label-width="100px" label="船舶名称">
								<el-select v-model="formData.field101" placeholder="请选择船舶名称" clearable :style="{ width: '100%' }">
									<el-option v-for="(item, index) in field101Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- 紧急程度 -->
						<el-col :span="6">
							<el-form-item prop="field101" label-width="100px" label="紧急程度">
								<el-select v-model="formData.field101" placeholder="请选择紧急程度" clearable :style="{ width: '100%' }">
									<el-option v-for="(item, index) in field101Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- 计划自修日期 -->
						<el-col :span="6">
							<el-form-item label-width="100px" label="计划航修日期" prop="field103">
								<el-date-picker
									type="daterange"
									v-model="formData.field103"
									format="yyyy-MM-dd"
									value-format="yyyy-MM-dd"
									:style="{ width: '100%' }"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									range-separator="至"
									clearable
								></el-date-picker>
							</el-form-item>
						</el-col>
						<!-- 完成日期· -->
						<el-col :span="6">
							<el-form-item label-width="100px" label="完成日期" prop="field103">
								<el-date-picker
									type="daterange"
									v-model="formData.field103"
									format="yyyy-MM-dd"
									value-format="yyyy-MM-dd"
									:style="{ width: '100%' }"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									range-separator="至"
									clearable
								></el-date-picker>
							</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<el-button size="medium" type="primary" @click="submitForm" icon="el-icon-search">查询</el-button>
				<el-button size="medium" @click="resetForm" icon="el-icon-delete">重置</el-button>
				<el-table :data="tableData" style="width: 100%; margin: 20px 0" max-height="500" border>
					<el-table-column fixed type="selection" width="55" align="center"> </el-table-column>
					<el-table-column fixed prop="date" label="维修设备/项目" min-width="150" align="center"> </el-table-column>
					<el-table-column prop="name" label="船舶名称" min-width="120" align="center"> </el-table-column>
					<el-table-column prop="province" label="航修单号" min-width="120" align="center"> </el-table-column>
					<el-table-column prop="province" label="服务商" min-width="120" align="center"> </el-table-column>
					<el-table-column prop="city" label="紧急程度" min-width="120" align="center"> </el-table-column>
					<el-table-column prop="city" label="计划航修日期" min-width="120" align="center"> </el-table-column>
					<el-table-column prop="city" label="预计维修地点" min-width="120" align="center"> </el-table-column>
					<el-table-column prop="address" label="维修日期" min-width="120" align="center"> </el-table-column>
					<el-table-column prop="zip" label="维修地点" min-width="120" align="center"> </el-table-column>
					<el-table-column prop="zip" label="状态" min-width="120" align="center"> </el-table-column>
					<el-table-column label="操作" fixed="right" min-width="100" align="center">
						<template slot-scope="scope">
							<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"> 完成 </el-button>
							<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"> 取消 </el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="厂修" name="third">
				<el-row :gutter="24">
					<el-form ref="elForm" :model="formData" :rules="rules" size="medium " label-width="10px">
						<!-- 关键字 -->
						<el-col :span="6">
							<el-form-item label-width="100px" label="关键字" prop="field102">
								<el-input v-model="formData.field102" placeholder="维修设备/项目，自修单号，维修申请单号" clearable :style="{ width: '100%' }"> </el-input>
							</el-form-item>
						</el-col>
						<!-- 归属公司 -->
						<el-col :span="6">
							<el-form-item prop="field101" label-width="100px" label="归属公司">
								<el-select v-model="formData.field101" placeholder="请选择归属公司" clearable :style="{ width: '100%' }">
									<el-option v-for="(item, index) in field101Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- 申请部门 -->
						<el-col :span="6">
							<el-form-item prop="field101" label-width="100px" label="申请部门">
								<el-select v-model="formData.field101" placeholder="请选择申请部门" clearable :style="{ width: '100%' }">
									<el-option v-for="(item, index) in field101Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- 状态 -->
						<el-col :span="6">
							<el-form-item prop="field101" label-width="100px" label="状态">
								<el-select v-model="formData.field101" placeholder="状态" clearable :style="{ width: '100%' }">
									<el-option v-for="(item, index) in field101Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- 申请船舶 -->
						<el-col :span="6">
							<el-form-item prop="field101" label-width="100px" label="船舶名称">
								<el-select v-model="formData.field101" placeholder="请选择船舶名称" clearable :style="{ width: '100%' }">
									<el-option v-for="(item, index) in field101Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- 紧急程度 -->
						<el-col :span="6">
							<el-form-item prop="field101" label-width="100px" label="紧急程度">
								<el-select v-model="formData.field101" placeholder="请选择紧急程度" clearable :style="{ width: '100%' }">
									<el-option v-for="(item, index) in field101Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- 计划自修日期 -->
						<el-col :span="6">
							<el-form-item label-width="100px" label="计划航修日期" prop="field103">
								<el-date-picker
									type="daterange"
									v-model="formData.field103"
									format="yyyy-MM-dd"
									value-format="yyyy-MM-dd"
									:style="{ width: '100%' }"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									range-separator="至"
									clearable
								></el-date-picker>
							</el-form-item>
						</el-col>
						<!-- 完成日期· -->
						<el-col :span="6">
							<el-form-item label-width="100px" label="完成日期" prop="field103">
								<el-date-picker
									type="daterange"
									v-model="formData.field103"
									format="yyyy-MM-dd"
									value-format="yyyy-MM-dd"
									:style="{ width: '100%' }"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									range-separator="至"
									clearable
								></el-date-picker>
							</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<el-button size="medium" type="primary" @click="submitForm" icon="el-icon-search">查询</el-button>
				<el-button size="medium" @click="resetForm" icon="el-icon-delete">重置</el-button>
				<el-table :data="tableData" style="width: 100%; margin: 20px 0" max-height="500" border>
					<el-table-column fixed type="index" label="#" width="50" align="center"> </el-table-column>
					<el-table-column fixed prop="date" label="维修设备/项目" min-width="150" align="center"> </el-table-column>
					<el-table-column prop="name" label="船舶名称" min-width="120" align="center"> </el-table-column>
					<el-table-column prop="province" label="厂修单号" min-width="120" align="center"> </el-table-column>
					<el-table-column prop="province" label="服务商" min-width="120" align="center"> </el-table-column>
					<el-table-column prop="city" label="紧急程度" min-width="120" align="center"> </el-table-column>
					<el-table-column prop="city" label="计划厂修日期" min-width="120" align="center"> </el-table-column>
					<el-table-column prop="city" label="预计维修地点" min-width="120" align="center"> </el-table-column>
					<el-table-column prop="address" label="维修日期" min-width="120" align="center"> </el-table-column>
					<el-table-column prop="zip" label="完成情况" min-width="120" align="center"> </el-table-column>
					<el-table-column prop="zip" label="状态" min-width="120" align="center"> </el-table-column>
					<el-table-column label="操作" fixed="right" min-width="100" align="center">
						<template slot-scope="scope">
							<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"> 完成 </el-button>
							<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"> 取消 </el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeName: "first",
				formData: {
					field101: undefined,
					field102: undefined,
					field103: undefined,
					field105: undefined,
					field106: [1],
				},
				rules: {
					field101: [],
					field102: [
						{
							message: "搜索关键字",
							trigger: "blur",
						},
					],
					field106: [],
				},
				field101Options: [
					{
						label: "选项一",
						value: 1,
					},
					{
						label: "选项二",
						value: 2,
					},
				],
				field106Options: [
					{
						label: "隐藏其他人草稿单",
						value: 1,
					},
				],
				checked: false,
				tableData: [],
			};
		},
		created() {},
		methods: {},
	};
</script>

<style lang="scss" scoped>
	.warp {
		padding: 20px 20px;
		background-color: white;
		margin: 15px;
		border-radius: 20px;
		height: calc(100vh - 120px);
		overflow: auto;
	}
	::v-deep .el-tabs__item {
		width: 100px;
		padding: 0;
		text-align: center;
	}
</style>
